<template>
	<div class="stars">
		<span
			v-for="n in 5"
			:key="n"
			:class="['iconfont icon-star', n <= starNum ? 'active' : '']"
			:style="{fontSize: size + 'px'}"
			@click="setStarNum(n)"
		></span>
	</div>
</template>

<script>
	import { useStars } from '../hooks/index.js'
	export default{
		name: 'TStars',
		props: {
			num: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 16
			}
		},
		setup(props, ctx) {
			const { starNum, setStarNum } = useStars(props.num, () => {
				ctx.emit('getStarNum', starNum.value)
			})
			
			return {
				starNum,
				setStarNum
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-star {
		color: #999;
		transition: color .3s;
	}
	
	.active {
		color: #FBAB06;
	}
	

</style>
